<template>
  <!-- 租赁客户档案 -->
  <div class="leaseDetailPage">
    <CommonTitle titleName="承租方信息" />
    <div class="inpuBox">
      <el-form
        :inline="true"
        :model="clientForm"
        class="demo-form-inline"
        label-position="right"
        label-width="100px"
      >
        <el-form-item label="合同签约方">
          <el-input v-model="clientForm.customerName" disabled placeholder="请输入" />
        </el-form-item>
        <el-form-item label="签约方属性" label-width="152px">
          <el-input v-model="clientForm.customerTypeName" disabled placeholder="请输入" />
        </el-form-item>
        <el-form-item label="联系人" label-width="152px">
          <el-input v-model="clientForm.contractsName" disabled placeholder="请输入" />
        </el-form-item>
        <el-form-item label="租赁资产">
          <el-input v-model="clientForm.assetsName" disabled placeholder="请输入" />
        </el-form-item>
        <el-form-item label="资产位置" label-width="152px">
          <el-input v-model="clientForm.address" disabled placeholder="请输入" />
        </el-form-item>
        <el-form-item label="联系电话" label-width="152px">
          <el-input v-model="clientForm.contractsPhone" disabled placeholder="请输入" />
        </el-form-item>
        <el-form-item label="资产类型">
          <el-input v-model="clientForm.assetsTypeName" disabled placeholder="请输入" />
        </el-form-item>
      </el-form>
    </div>

    <CommonTitle titleName="租赁信息" />
    <div class="inpuBox">
      <el-form
        :inline="true"
        :model="leaseForm"
        class="demo-form-inline"
        label-position="right"
        label-width="100px"
      >
        <el-form-item label="合同名称">
          <el-input v-model="leaseForm.contractName" disabled placeholder="请输入" />
        </el-form-item>
        <el-form-item label="合同编号" label-width="152px">
          <el-input v-model="leaseForm.contractId" disabled placeholder="请输入" />
        </el-form-item>
        <el-form-item label="合作状态" label-width="152px">
          <el-input v-model="leaseForm.statusName" disabled placeholder="请输入" />
        </el-form-item>
        <el-form-item label="租赁周期">
          <el-input v-model="leaseForm.periodName" disabled placeholder="请输入" />
        </el-form-item>
        <el-form-item label="实际月度签约租金单价" label-width="152px">
          <el-input v-model="leaseForm.name1" disabled placeholder="请输入" />
        </el-form-item>
        <el-form-item label="实际年度签约租金单价" label-width="152px">
          <el-input v-model="leaseForm.name2" disabled placeholder="请输入" />
        </el-form-item>
        <el-form-item label="承租面积">
          <el-input v-model="leaseForm.leaseTotalArea" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="逐年递增模式和比例" label-width="152px">
          <el-input v-model="leaseForm.name3" disabled placeholder="请输入" />
        </el-form-item>
        <el-form-item label="免租月份" label-width="152px">
          <el-input v-model="leaseForm.name4" disabled placeholder="请输入" />
        </el-form-item>
        <el-form-item label="应收租金总额">
          <el-input v-model="leaseForm.receivableTotalRent" disabled placeholder="请输入" />
        </el-form-item>
        <el-form-item label="已实收租金总额" label-width="152px">
          <el-input v-model="leaseForm.receivedTotalRent" disabled placeholder="请输入" />
        </el-form-item>
        <el-form-item label="未收租金总额" label-width="152px">
          <el-input v-model="leaseForm.uncollectedTotalRent" disabled placeholder="请输入" />
        </el-form-item>
      </el-form>
    </div>

    <CommonTitle titleName="房源租赁明细" />
    <el-table
      v-loading="houseTabel.loading"
      ref="houseDetailTable"
      :data="houseTabel.tableData"
      tooltip-effect="dark"
      style="width: 100%; margin-bottom: 32px"
    >
      <el-table-column
        prop="housingId"
        label="序号"
        width="80"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="housingName"
        label="房源名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="leaseArea"
        label="承租面积"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="areaPrice"
        label="签约租金单价(元/月)"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="contractId"
        label="合同应收租金总额(元/月)"
        align="center"
      ></el-table-column>
    </el-table>

    <CommonTitle titleName="租金支付计划">
      <template #rightCnBox>
        <div class="titleRight">
          <div class="payType">
            <span class="m-r10">付款方式</span>
            <el-radio-group
              v-model="paymentPlan.paymentType"
              size="large"
              @change="paymentChange"
            >
              <el-radio-button :label="3">年付</el-radio-button>
              <el-radio-button :label="4">季付</el-radio-button>
              <el-radio-button :label="5">月付</el-radio-button>
            </el-radio-group>
          </div>
          <div class="payAmount">
            <span class="p-r30">应收款总额：48654</span>
            <span class="p-r30">实收款总额：85153</span>
            <span>剩余未收款总额：87454</span>
          </div>
        </div>
      </template>
    </CommonTitle>
    <el-table
      v-loading="paymentPlanTabel.loading"
      ref="payPlanTable"
      :data="paymentPlanTabel.tableData"
      tooltip-effect="dark"
      style="width: 100%; margin-bottom: 23px"
    >
      <el-table-column prop="index" label="序号" width="70" align="center">
      </el-table-column>
      <el-table-column
        prop="payStartTime"
        label="付款开始日期"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="payEndTime"
        label="付款结束日期"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="receivableRent"
        label="期间应收租金"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="payStatus"
        label="付款状态"
        width="80"
        align="center"
      >
        <template #default="scope">
            {{scope.row.payStatus == -1 ? '已支付' : scope.row.payStatus == -2 ? '未支付' : scope.row.payStatus == 1 ? '已收' : '政策免收'}}
        </template>
      </el-table-column>
      <el-table-column
        prop="receivedRent"
        label="期间实收租金"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="payRealTime"
        label="实际付款时间"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="realPayer"
        label="实际付款人"
        width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="bankSerialNo"
        label="银行流水编号"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="invoiceStatus"
        label="是否已开发票"
        width="110"
        align="center"
      >
        <template #default="scope">
            {{scope.row.invoiceStatus == -1 ? '否' : '是'}}
        </template>
      </el-table-column>
      <el-table-column
        prop="remark"
        label="备注说明"
        width="80"
        align="center"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import CommonTitle from "@/components/CommonTitle.vue";
import { ref, reactive, onMounted } from "vue";
import { useRoute } from 'vue-router'
import {
  ElForm,
  ElFormItem,
  ElTable,
  ElTableColumn,
  ElRadioGroup,
  ElRadioButton
} from "element-plus";
// import { getLeaseCustomer, getLeaseHousing, getRentPlan, getLeaseContract } from '@/api/lease'

import { leaseApi } from '@/api/lease'

const route = useRoute()
const { id:contractId } = route.query

const clientForm = reactive({
    customerName: '',
    customerTypeName: '',
    contractsName: '',
    assetsName: '',
    address: '',
    contractsPhone: '',
    assetsTypeName: ''
});
// 初始查询客户及对应的资产信息
const initLeaseCustomer = () => {
    leaseApi.getLeaseCustomer(contractId).then((res) => {
        const { code, data } = res
        if (code == 200) {
            clientForm.customerName = data.customerName
            clientForm.customerTypeName = data.customerType == 1 ? '个人' : '企业'
            clientForm.contractsName = data.contractsName
            clientForm.assetsName = data.assetsName
            clientForm.address = data.region + data.street
            clientForm.contractsPhone = data.contractsPhone
            clientForm.assetsTypeName = data.assetsType == 1 ? '农贸市场' : data.assetsType == 2 ? '商业(绿道)' : data.assetsType == 3 ? '商业(商铺)' : data.assetsType == 4 ? '写字楼' : data.assetsType == 5 ? '综合体' : '其他'
        }
    })
}

const leaseForm = reactive({
    contractName: '',
    contractId: '',
    statusName: '',
    periodName: '',
    leaseTotalArea: '',
    receivableTotalRent: '',
    receivedTotalRent: '',
    uncollectedTotalRent: '',
    name1: '10',
    name2: '20',
    name3: '65',
    name4: '5',
});
// 查询合同信息
const initLeaseContract = () => {
    leaseApi.getLeaseContract(contractId).then((res) => {
        const { code, data } = res
        if (code == 200) {
            leaseForm.contractName = data.contractName
            leaseForm.statusName = data.status == -1 ? '未生效' : data.status == 1 ? '租赁中' : data.status == 2 ? '正常到期' : '提前退租'
            leaseForm.contractId = data.contractId
            leaseForm.periodName = data.signStartTime + '至' +  data.signEndTime
            leaseForm.leaseTotalArea = data.leaseTotalArea
            leaseForm.receivableTotalRent = data.receivableTotalRent
            leaseForm.receivedTotalRent = data.receivedTotalRent
            leaseForm.uncollectedTotalRent = data.uncollectedTotalRent
        }
    })
}

const houseTabel = reactive({
  loading: false,
  tableData: [],
});
const initLeaseHousing = () => {
    leaseApi.getLeaseHousing(contractId).then((res) => {
        const { code, data } = res
        if (code == 200) {
            houseTabel.tableData = data.housings ? data.housings : []
        }
    })
    
}

const paymentPlan = reactive({
  paymentType: 0,
});
const paymentChange = (val) => {
  console.log("选了？？？？", val);
};

const paymentPlanTabel = reactive({
  loading: false,
  tableData: [
    {
        name0: "第一期",
        name1: "2022-10-20",
        name2: "2022-12-25",
        name3: "55.36元",
        name4: "已支付",
        name5: "70.56元",
        name6: "2022-12-25 10:22:35",
        name7: "刘晓红",
        name8: "897894564564678",
        name9: "是",
        name10: "距离喀什角动量空间",
    },
  ],
});
const initRentPlan = () => {
    leaseApi.getRentPlan(contractId).then((res) => {
        const { code, data } = res
        if (code == 200) {
            paymentPlanTabel.tableData = data.payPlans ? data.payPlans : []
            paymentPlanTabel.tableData.map((n,i) => {
                n.index = i + 1
            })
        }
    })
}

onMounted(() => {
    initLeaseCustomer()
    initLeaseContract()
    initLeaseHousing()
    initRentPlan()
    // initMoney()
    // initAssetsSelectOptions()
})
</script>

<style lang="scss" scoped>
.leaseDetailPage {
  .titleRight {
    width: 91%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .payType {
      margin-left: 16px;
      display: flex;
      align-items: center;
    }
    .payAmount {
      font-weight: bold;
    }
  }
  .inpuBox {
    padding: 32px 76px 15px;
    border-radius: 10px;
    border: 1px solid #e3e7f1;
    margin-bottom: 38px;
    .demo-form-inline {
      .el-input {
        width: 251px;
      }
      .el-form {
        .el-form-item {
          .el-form-item__label {
            font-size: 16px;
          }
        }
      }
    }
  }
}
</style>
